<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ include file="../include/base.jsp" %>
<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" href="${basePath }/css/bootstraplan.css">
	
	<style type="text/css">
		#mydiv{
			position:relative;
		}
		
		#total{
			position:relative;
		}
		#kinds{
			position:absolute;
			top:32px;
			left:120px;
		}
		#everyone{
			position:absolute;
			top:32px;
			left:220px;
		}
		.taskdiv{
			position:absolute;
			width:60px;
			height:25px;
			background-image:url(img/all.png);
			background-repeat:no-repeat;
			background-position:0px -401px;
			top:17px;
			left:-45px;
			display:none;
		}
		.box{width:250px; height:380x; border:1px solid #d4693e; border-radius:5px; margin-top: 47px; position:absolute; background-color: #fff;top:5px;left:-5px;z-index:3}
        .a1,.a2{width:0; height:0; overflow:hidden; border-width:10px; border-style:dotted dotted solid;  position:absolute}
        .abox{position: absolute; width:20px; height: 20px; left:20px; top:-20px}
        .a1{border-color:transparent transparent #D4693E;  top:-1px}
        .a2{border-color:transparent transparent #FFFFFF;  top:0}
        .comment{position:relative;padding:10px;background:#fff; border-radius:3px;border:1px solid #e1e4e5;width:250px;z-index:4;margin-right:100px;}
		.arrow {display:block;_display:none;position:absolute;overflow:hidden;}
		.arrow .out,.arrow .inside{ font-family:黑体;font-weight:bold;font-size:16px; }
		.arrow .out{display:inline-block;overflow:hidden;color:#e1e4e5;}
		.arrow .inside{position:absolute;color:#fbfbfb;}
		.arXYr {top:9px;right:-9px;}
		.aiXYr {top:0px;right:1px;}
		.mytask{
			position:relative;
		}
		.mycomment{
			position:absolute;
			top:60px;
			left:-260px;
			
		}
	</style>
</head>
<body style="background-color:#f3f1ec">
	<div class="navbar" >
	  <div class="navbar-inner" style="height:60px">
		<a class="brand" href="#"><img src="${basePath }/img/logo-topleft.png" alt="" /></a>
		<a href="" class="btn btn-info" style="margin-top:12px;margin-left:10px">添加日程</a>
		<a href="" class="btn btn-info" style="margin-top:12px">添加联系人</a>
		
		<div class="btn-group pull-right">
            <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
               <i class="icon-user"></i>${sessionScope.curr_user.username }
              <span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
              <li><a href="#"><i class="icon-cog"></i>　密码设置</a></li>
              <li class="divider"></li>
              <li><a href="#"><i class="icon-off"></i>　安全退出</a></li>
            </ul>
          </div>
		</div>
	</div>
	<div >
		<div class="row-fluid">
		<div class="span3" style="height:400px">
				<div class="wall" style="padding:8px 0;">
					<ul class="nav nav-list" >
						<li class="nav-header" style="padding-top:0px">Welcome!</li>
						<li class="divider"><br></li>
						<li ><a href="home.action"><i class="icon-white icon-home"></i>最新动态</a></li>
						<li><a href="contactlist.action"><i class="icon-user"></i>联系人</a></li>
						<li class="active"><a href="task/task.action"><i class="icon-leaf"></i>日程</a></li>
						<li><a href="${basePath }/deal.action"><i class="icon-gift"></i>交易</a></li>
						<li><a href="emails.action"><i class="icon-gift"></i>群发邮件</a></li>
					</ul>
				</div>
		</div>
		<%-- <c:if test="${empty taskList}">
			<div class="span6" style="background-color:#fff;height:600px;border:1px solid #ccc;border-radius:2px;">
			<div style="margin-top:50px;margin-left:150px;" id="mydiv">
				
				<div>
					<img src="${basePath }/img/nodeal.png" alt="" />
				</div>
				<div id="message">
					<strong style="font-size:24px">跟踪您的建议和出价</strong><br/><br/>
					<span >您可以知道您的交易的状态<br />
					添加记录，交易和客户，跟踪出价信息<br />
					了解从每一位客户赚到多少</span><br /><br/>
					<a class="btn btn-primary"  id="" ><i class="icon-plus icon-white"></i>添加第一条交易</a>
				</div>
			</div>
			
			
		</div>
		</c:if> --%>
		
			<div class="span7" style="background-color:#fff;height:800px;border:1px solid #ccc;border-radius:2px;" id="">
			<div id="container">
			<div class="wall" style="border-bottom:1px solid #ccc;">
				<div style="background-color:#f0f5f8;height:30px;padding-top:17px;padding-left:15px;">
					<strong style="margin-left:30px;font-size:16px;">交易</strong>
					
				</div>
				
			</div>
			<div style="padding:30px;" id="total">
				<table>
					<tr>
						
						<td>
							显示日程在
			
						</td>
					</tr>
					
				</table>
				<div class="btn-group" id="kinds">
					<a class="btn dropdown-toggle btn-mini btn-info" data-toggle="dropdown" href="#">
					   所有分类
					  <span class="caret"></span>
					</a>
					<ul class="dropdown-menu">
					  <li><a href="#"><i class="icon-cog"></i>所有分类</a></li>
					  <c:forEach items="${categoryList}" var="categ">
					  	<li><a href="findDealsByCategory.action?id=${categ.id}"><i class="icon-home"></i>${categ.type}</a></li>
					  </c:forEach>
					
					</ul>
				</div>
				<div class="btn-group" id="everyone">
					<a class="btn dropdown-toggle btn-mini btn-success" data-toggle="dropdown" href="#">
					   所有人
					  <span class="caret"></span>
					</a>
					<ul class="dropdown-menu">
					  <li><a href="findDealsByCategory.action?q=all"><i class="icon-gift"></i>所有人</a></li>
					  
					  <li><a href="findDealsByCategory.action?q=me"><i class="icon-home"></i>只有我</a></li>
					</ul>
				</div>
				
			</div>
			<div style="border-bottom:1px solid #ccc;"></div>
			<div style="margin-top:10px;margin-left:10px;margin-right:10px;">
				<ul class="nav nav-tabs">
				  <li class="active"><a href="#home" data-toggle="tab">今天</a></li>
				  <li ><a href="#tomorrow" data-toggle="tab">明天</a></li>
				  <li ><a href="#thisweek" data-toggle="tab">本周</a></li>
				  <li><a href="#profile" data-toggle="tab">下周</a></li>
				  <li><a href="#messages" data-toggle="tab">以后</a></li>
				  <li><a href="#settings" data-toggle="tab">已过期</a></li>
				  <li><a href="#special" data-toggle="tab">具体时间</a></li>
				</ul>
				<div class="tab-content">
				  <div class="tab-pane active" id="home">
				  		<c:choose>
				  		<c:when test="${empty todayList }">
				  			<span style="margin-left:20px;color:green">此分类下还没有设定日程哦！</span>
				  		</c:when>
				  		<c:otherwise>
				  			<c:forEach items="${todayList }" var="task">
						<div style="margin-bottom:5px;position:relative;padding-left:15px;" class="mytask">
							<input type="hidden" value="${task.id }" class="taskid">
							
							<span class="newstate"><br/><span><input type="checkbox" style="margin-top:-2px;" name="delcheck" class="checkbox">&nbsp;<input type="hidden" value="${task.category.color}"><span class="newCategoryType" style="border:1px solid #ccc;">${task.category.type }</span> &nbsp;<span class="newtaskContent">${task.task }</span></span> <br>
							
							</span>
							<div class="taskdiv" style="padding-top:3px;">
								<a href="javascript:;" title="删除" style="margin-left:10px;" class="deltask"><i class="icon-trash"></i></a>
								<a href="javascript:;" style="color:red;text-decoration:underline;" class="editTask">修改</a>
							</div>
					
						</div>
						
						</c:forEach>
				  		</c:otherwise>
				  	</c:choose>
				  </div>
				  <div class="tab-pane" id="tomorrow">
				  	  	<c:choose>
				  		<c:when test="${empty tomorowList }">
				  			<span style="margin-left:20px;color:green">此分类下还没有设定日程哦！</span>
				  		</c:when>
				  		<c:otherwise>
				  			<c:forEach items="${tomorowList }" var="task">
						<div style="margin-bottom:5px;position:relative;padding-left:15px;" class="mytask">
							<input type="hidden" value="${task.id }" class="taskid">
							
							<span class="newstate"><br/><span><input type="checkbox" style="margin-top:-2px;" name="delcheck" class="checkbox">&nbsp;<input type="hidden" value="${task.category.color}"><span class="newCategoryType" style="border:1px solid #ccc;">${task.category.type }</span> &nbsp;<span class="newtaskContent">${task.task }</span></span> <br>
							
							</span>
							<div class="taskdiv" style="padding-top:3px;">
								<a href="javascript:;" title="删除" style="margin-left:10px;" class="deltask"><i class="icon-trash"></i></a>
								<a href="javascript:;" style="color:red;text-decoration:underline;" class="editTask">修改</a>
							</div>
					
						</div>
						
						</c:forEach>
				  		</c:otherwise>
				  	</c:choose>
				  
				  </div>
				  <div class="tab-pane" id="thisweek">
				  	  	<c:choose>
				  		<c:when test="${empty thisWeekList }">
				  			<span style="margin-left:20px;color:green">此分类下还没有设定日程哦！</span>
				  		</c:when>
				  		<c:otherwise>
				  			<c:forEach items="${thisWeekList }" var="task">
						<div style="margin-bottom:5px;position:relative;padding-left:15px;" class="mytask">
							<input type="hidden" value="${task.id }" class="taskid">
							
							<span class="newstate"><br/><span><input type="checkbox" style="margin-top:-2px;" name="delcheck" class="checkbox">&nbsp;<input type="hidden" value="${task.category.color}"><span class="newCategoryType" style="border:1px solid #ccc;">${task.category.type }</span> &nbsp;<span class="newtaskContent">${task.task }</span></span> <br>
							
							</span>
							<div class="taskdiv" style="padding-top:3px;">
								<a href="javascript:;" title="删除" style="margin-left:10px;" class="deltask"><i class="icon-trash"></i></a>
								<a href="javascript:;" style="color:red;text-decoration:underline;" class="editTask">修改</a>
							</div>
					
						</div>
						
						</c:forEach>
				  		</c:otherwise>
				  	</c:choose>
				  </div>
				  <div class="tab-pane" id="profile">
				  	  	<c:choose>
				  		<c:when test="${empty nextWeekList }">
				  			<span style="margin-left:20px;color:green">此分类下还没有设定日程哦！</span>
				  		</c:when>
				  		<c:otherwise>
				  			<c:forEach items="${nextWeekList }" var="task">
						<div style="margin-bottom:5px;position:relative;padding-left:15px;" class="mytask">
							<input type="hidden" value="${task.id }" class="taskid">
							
							<span class="newstate"><br/><span><input type="checkbox" style="margin-top:-2px;" name="delcheck" class="checkbox">&nbsp;<input type="hidden" value="${task.category.color}"><span class="newCategoryType" style="border:1px solid #ccc;">${task.category.type }</span> &nbsp;<span class="newtaskContent">${task.task }</span></span> <br>
							
							</span>
							<div class="taskdiv" style="padding-top:3px;">
								<a href="javascript:;" title="删除" style="margin-left:10px;" class="deltask"><i class="icon-trash"></i></a>
								<a href="javascript:;" style="color:red;text-decoration:underline;" class="editTask">修改</a>
							</div>
					
						</div>
						
						</c:forEach>
				  		</c:otherwise>
				  	</c:choose>
				  </div>
				  <div class="tab-pane" id="messages">
				  	  	<c:choose>
				  		<c:when test="${empty laterList }">
				  			<span style="margin-left:20px;color:green">此分类下还没有设定日程哦！</span>
				  		</c:when>
				  		<c:otherwise>
				  			<c:forEach items="${laterList }" var="task">
						<div style="margin-bottom:5px;position:relative;padding-left:15px;" class="mytask">
							<input type="hidden" value="${task.id }" class="taskid">
							
							<span class="newstate"><br/><span><input type="checkbox" style="margin-top:-2px;" name="delcheck" class="checkbox">&nbsp;<input type="hidden" value="${task.category.color}"><span class="newCategoryType" style="border:1px solid #ccc;">${task.category.type }</span> &nbsp;<span class="newtaskContent">${task.task }</span></span> <br>
							
							</span>
							<div class="taskdiv" style="padding-top:3px;">
								<a href="javascript:;" title="删除" style="margin-left:10px;" class="deltask"><i class="icon-trash"></i></a>
								<a href="javascript:;" style="color:red;text-decoration:underline;" class="editTask">修改</a>
							</div>
					
						</div>
						
						</c:forEach>
				  		</c:otherwise>
				  	</c:choose>
				  </div>
				  <div class="tab-pane" id="settings">
				  		<c:choose>
				  		<c:when test="${empty overDuelList }">
				  			<span style="margin-left:20px;color:green">此分类下还没有设定日程哦！</span>
				  		</c:when>
				  		<c:otherwise>
				  			<c:forEach items="${overDuelList }" var="task">
						<div style="margin-bottom:5px;position:relative;padding-left:15px;" class="mytask">
							<input type="hidden" value="${task.id }" class="taskid">
							
							<span class="newstate"><br/><span><input type="checkbox" style="margin-top:-2px;" name="delcheck" class="checkbox">&nbsp;<input type="hidden" value="${task.category.color}"><span class="newCategoryType" style="border:1px solid #ccc;">${task.category.type }</span> &nbsp;<span class="newtaskContent">${task.task }</span></span> <br>
							
							</span>
							<div class="taskdiv" style="padding-top:3px;">
								<a href="javascript:;" title="删除" style="margin-left:10px;" class="deltask"><i class="icon-trash"></i></a>
								<a href="javascript:;" style="color:red;text-decoration:underline;" class="editTask">修改</a>
							</div>
					
						</div>
						
						</c:forEach>
				  		</c:otherwise>
				  	</c:choose>
				  </div>
				  <div class="tab-pane" id="special">
				  	<c:choose>
				  		<c:when test="${empty specialList }">
				  			<span style="margin-left:20px;color:green">此分类下还没有设定日程哦！</span>
				  		</c:when>
				  		<c:otherwise>
				  			<c:forEach items="${specialList }" var="task">
						<div style="margin-bottom:5px;position:relative;padding-left:15px;" class="mytask">
							<input type="hidden" value="${task.id }" class="taskid">
							
							<span class="newstate"><br/><span><input type="checkbox" style="margin-top:-2px;" name="delcheck" class="checkbox">&nbsp;<input type="hidden" value="${task.category.color}"><span class="newCategoryType" style="border:1px solid #ccc;">${task.category.type }</span> &nbsp;<span class="newtaskContent">${task.task }</span></span> <br>
							
							</span>
							<div class="taskdiv" style="padding-top:3px;">
								<a href="javascript:;" title="删除" style="margin-left:10px;" class="deltask"><i class="icon-trash"></i></a>
								<a href="javascript:;" style="color:red;text-decoration:underline;" class="editTask">修改</a>
							</div>
					
						</div>
						
						</c:forEach>
				  		</c:otherwise>
				  	</c:choose>
				  </div>
				</div>
			</div>
			
		</div>
		
		</div>
		
		
	</div>
	</div>
			
			
		
			
			
			
			
			
			
			
			
			
			
			
			
	
	<script type="text/javascript" src="${basePath }/js/jquery.js"></script>
	<script type="text/javascript" src="${basePath }/js/bootstrap.min.js"></script>	
	<script type="text/javascript">
		$(document).ready(function(){
			$(".categ").each(function(i){
				var color = $(this).prev().val();
				
			   $(this).css("background-color","#" + color); 
			   
			 }); 
			 $("#datepicker,#datepicker2,#datepicker3,#datepicker4,.datepicker,#updateDatepicker").datepicker({  
		        changeMonth: true, changeYear: true,  
		        showOn: 'button',   
		        buttonImage: 'img/calendar.gif',   
		        buttonImageOnly: true,  
		         minDate: '-2y', maxDate: '+2y'  
		    });  
		    $("#datepicker").datepicker('option', {dateFormat:"yy-mm-dd" });
		    $("#canseldiv").click(function(){
				$(".box").hide();
			});
			$("#specifiedTime").click(function(){
				$("#selectTime").hide();
				$("#dateTime").show();
			});
			$("#cansel").click(function(){
				$("#dateTime").hide();
				$("#selectTime").show();
			});
			$(".canselTime").click(function(){
				$(this).parent().hide();
				$(this).parent().prev().show();
			});
			$(".mytask").mouseover(function(){
				$(this).find(".taskdiv").show();
			});
			$(".mytask").mouseout(function(){
				$(this).find(".taskdiv").hide();
			});
			$(".checkbox").live("click",function(){
				$(this).parent().next().remove();
				$(this).parent().css("text-decoration","line-through");
				$(this).parent().css("background-color","yellow");
				$(this).parent().parent().fadeOut("300");
				var taskid = $(this).parent().parent().prev().val();
				$.get("task/delTask.action",{id:taskid});
			});
			$(".deltask").live("click",function(){
				if(confirm("确实要删除这个日程吗？")){
					$(this).parent().parent().remove();
					var taskid = $(this).parent().prev().prev().val();
					$.get("task/delTask.action",{id:taskid});
				}
			});
				$("#addMytask").click(function(){
				$(".box").hide();
				var taskContent = $("#mytaskContext").val();
				var abstractTime = $("#selectTime").val();
				var specifiedTime = $("#datepicker4").val();
				var taskCategory = $("#mytaskCategory").val();
				var taskViews = $("#mytaskViews").val();
				var dealid = $("#dealid").val();
				
				$("#datepicker4").val("");
				$("#mytaskContext").val("");
				$("#dateTime").hide();
				$("#selectTime").show();		
				if(specifiedTime != ""){
					
					$.post("task/addMyTask.action",{taskName:taskContent,specifiedTime:specifiedTime,category:taskCategory,taskViews:taskViews,type:"交易",typeid:dealid},function(data){
						$("#showNewTask").html("");
						$(data).each(function(){
							$("#showNewTask").append("<div style='margin-bottom:5px;position:relative;padding-left:15px;' class='mynewtask'><input type='hidden' value='"+this.id+"' id='taskid'><span >"+this.state+"<br/><span><input type='checkbox' style='margin-top:-2px;' name='delcheck' class='checkbox'>&nbsp;<input type='hidden' value='"+this.category.color+"'><span class='taskCategoryType'>"+this.category.type+"</span> &nbsp;<span >"+this.task+"</span></span> <br></span><div class='taskdiv' style='padding-top:3px;'><a href='javascript:;' title='删除' style='margin-left:10px;' class='deltask'><i class='icon-trash'></i></a><a href='javascript:;' style='color:red;text-decoration:underline;' class='ediTtask'>修改</a></div></div>");
							
							$(".mytask").remove();
							
						})
					})
				}else{
					$.post("task/addMyTask.action",{taskName:taskContent,abstractTime:abstractTime,category:taskCategory,taskViews:taskViews,type:"交易",typeid:dealid},function(data){
						$("#showNewTask").html("");
						$(data).each(function(){
							$("#showNewTask").append("<div style='margin-bottom:5px;position:relative;padding-left:15px;' class='mynewtask'><input type='hidden' value='"+this.id+"' id='taskid'><span >"+this.state+"<br/><span><input type='checkbox' style='margin-top:-2px;' name='delcheck' class='checkbox'>&nbsp;<input type='hidden' value='"+this.category.color+"'><span class='taskCategoryType'>"+this.category.type+"</span> &nbsp;<span >"+this.task+"</span></span> <br></span><div class='taskdiv' style='padding-top:3px;'><a href='javascript:;' title='删除' style='margin-left:10px;' class='deltask'><i class='icon-trash'></i></a><a href='javascript:;' style='color:red;text-decoration:underline;' class='editTask'>修改</a></div></div>");
							
							$(".mytask").remove();
						})
					})
				}
			$(".mynewtask").live("mouseover",function(){
				$(this).find(".taskdiv").show();
			});
				$(".mynewtask").live("mouseout",function(){
					$(this).find(".taskdiv").hide();
				});
			});
			$(".newCategoryType").each(function(i){
				var color = $(this).prev().val();
			
			   $(this).css("background-color","#" + color); 
			   $(this).css("color","#fff");
			});
			$(".taskCategoryType").livequery(function(i){
				
				var color = $(this).prev().val();
				
			   $(this).css("background-color","#" + color); 
			   $(this).css("color","#fff");
			
			}); 
			var taskid;
			$(".editTask").live("click",function(){
				var id = $(this).parent().prev().prev().val();
				taskid = id;
				$.get("task/findTaskById.action",{id:id},function(data){
					$("#updateTaskName").val(data.task);
				})
				var p = $(".comment");
				var position = p.position();
				$(".comment").css("top",position.top + 10);
				$(".comment").show("fast");
				
			});
			$(".canselTaskdiv").live("click",function(){
				$(this).parent().parent().parent().fadeOut(300);
			});
			$(".updatespecifiedTime").click(function(){
				$("#updateabstractTime").hide();
				$("#updateDateTime").show();
			});
			 $("#updateTask").live("click",function(){
			 	
				var taskContent = $("#updateTaskName").val();
				var updateabstractTime = $("#updateabstractTime").val();
				var specifiedTime = $("#updateDatepicker").val();
				var updateTaskCategory = $("#updateTaskCategory").val();
				var updateTaskViews = $("#updateTaskViews").val();
				var dealid = $("#dealid").val();
				$.post("task/updateMyTask.action",{id:taskid,taskName:taskContent,abstractTime:updateabstractTime,specifiedTime:specifiedTime,category:updateTaskCategory,taskViews:updateTaskViews,type:"交易",typeid:dealid},function(data){
					$("#showNewTask").html("");
						$(data).each(function(){
							$("#showNewTask").append("<div style='margin-bottom:5px;position:relative;padding-left:15px;' class='mynewtask'><input type='hidden' value='"+this.id+"' id='taskid'><span >"+this.state+"<br/><span><input type='checkbox' style='margin-top:-2px;' name='delcheck' class='checkbox'>&nbsp;<input type='hidden' value='"+this.category.color+"'><span class='taskCategoryType'>"+this.category.type+"</span> &nbsp;<span >"+this.task+"</span></span> <br></span><div class='taskdiv' style='padding-top:3px;'><a href='javascript:;' title='删除' style='margin-left:10px;' class='deltask'><i class='icon-trash'></i></a><a href='javascript:;' style='color:red;text-decoration:underline;' class='editTask'>修改</a></div></div>");
							
							$(".mytask").remove();
						})
				});
				
			}); 
		});
	</script>
</body>
</html>
